import { ConfigPreview } from "@/docs/components/Preview";

# Object

Render an object with a subset of fields. Extends [Base](base).

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      params: {
        type: "object",
        objectFields: {
          title: { type: "text" },
        },
      },
    },
    defaultProps: { params: { title: "Hello, world" } },
    render: ({ params }) => {
      return <p>{params.title}</p>;
    },
  }}
/>

```tsx {5-10} copy
const config = {
  components: {
    Example: {
      fields: {
        params: {
          type: "object",
          objectFields: {
            title: { type: "text" },
          },
        },
      },
      render: ({ params }) => {
        return <p>{params.title}</p>;
      },
    },
  },
};
```

## Params

| Param                           | Example                                     | Type    | Status   |
| ------------------------------- | ------------------------------------------- | ------- | -------- |
| [`type`](#type)                 | `type: "array"`                             | "array" | Required |
| [`objectFields`](#objectfields) | `objectFields: { title: { type: "text" } }` | Object  | Required |

## Required params

### `type`

The type of the field. Must be `"object"` for Object fields.

```tsx {6} copy
const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "object",
          objectFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};
```

### `objectFields`

Describe the fields for the object. Shares an API with `fields`.

Can include any field type, including nested object fields.

```tsx {7-9} copy
const config = {
  components: {
    Example: {
      fields: {
        items: {
          type: "object",
          objectFields: {
            title: { type: "text" },
          },
        },
      },
      // ...
    },
  },
};
```
